<template>
<div>
        <HeadNav></HeadNav>   
  <div class="box">
     <div class="left_nav">
      <ul>
        <li>
          <svg
            t="1641701518755"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="2725"
            width="24"
            height="18"
          >
            <path
              d="M919.2 419.2L531.2 141.6c-11.2-8-26.4-8-36.8 0L104 419.2c-12.8 8.8-6.4 28.8 9.6 28.8H192v432c0 8.8 7.2 16 16 16h192c8.8 0 16-7.2 16-16V640h192v240c0 8.8 7.2 16 16 16h192c8.8 0 16-7.2 16-16V448h78.4c15.2 0 21.6-20 8.8-28.8z"
              p-id="2726"
            ></path>
          </svg>
          会员列表
        </li>
        <li>
          <svg
            t="1641701816576"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="3651"
            width="24"
            height="18"
          >
            <path
              d="M879.914071 232.077336c10.998926 0 19.998047 8.999121 19.998047 19.998047v519.949224c0 10.998926-8.999121 19.998047-19.998047 19.998047H143.985939c-10.998926 0-19.998047-8.999121-19.998047-19.998047v-519.949224c0-10.998926 8.999121-19.998047 19.998047-19.998047h735.928132m0-59.994141H143.985939c-44.195684 0-79.992188 35.796504-79.992188 79.992188v519.949224c0 44.195684 35.796504 79.992188 79.992188 79.992188h735.928132c44.195684 0 79.992188-35.796504 79.992188-79.992188v-519.949224c0-44.195684-35.796504-79.992188-79.992188-79.992188z"
              p-id="3652"
            ></path>
            <path
              d="M606.540768 661.035446l-229.27761-92.990919-233.277219 161.984181v41.995899h735.928132v-376.963187z"
              p-id="3653"
            ></path>
            <path
              d="M290.971585 352.065619c22.097842 0 39.996094 17.898252 39.996094 39.996094s-17.898252 39.996094-39.996094 39.996094-39.996094-17.898252-39.996094-39.996094 17.898252-39.996094 39.996094-39.996094m0-59.994142c-55.19461 0-99.990235 44.795625-99.990236 99.990236s44.795625 99.990235 99.990236 99.990235 99.990235-44.795625 99.990235-99.990235-44.795625-99.990235-99.990235-99.990236z"
              p-id="3654"
            ></path>
          </svg>
          会员等级
        </li>
        
      </ul>
    </div>
       <div class="right_nav">
      <div class="header">
        <p>后台首页 <i></i> <span>商品列表</span></p>
      </div>
      <div class="operation">
        <div class="left">
          <span>添加会员</span>
        </div>
        <div class="right">
          <input type="text" placeholder="手机号/邮箱/会员昵称" />
          <span>搜索</span>
          <span>高级搜索</span>
        </div>
      </div>
      <div class="main_box">
        <div class="top_header">
          <section>
            会员
          </section>
          <section>会员等级</section>
          <section>登录注册</section>
          <section>状态</section>
          <section>操作</section>
        </div>
        <ul>
        <li>
            <section>
            <div class="box">

            </div>
            <div class="cen">
               <p>user22</p>
                <span>用户id：4</span>
            </div>
            <div class="right">
                详情
            </div>
          </section>
          <section>普通会员</section>
          <section>
        
                  注册时间 : 2019-08-13 01:02:22 <br>
最后登录 :
            
          </section>
          <section><span>禁用</span></section>
          <section>
              修改 &nbsp 删除
          </section>
        </li>
        <li>
            <section>
            <div class="box">

            </div>
            <div class="cen">
               <p>user22</p>
                <span>用户id：4</span>
            </div>
            <div class="right">
                详情
            </div>
          </section>
          <section>普通会员</section>
          <section>
        
                  注册时间 : 2019-08-13 01:02:22 <br>
最后登录 :
            
          </section>
          <section><span>禁用</span></section>
          <section>
              修改 &nbsp 删除
          </section>
        </li>
        </ul>
      </div>
      <footer>
          <p><span>共5条</span>
            <span>10条/页</span>
            <span><</span>
            <span>1</span>
            <span>></span>
            <span>前往</span>
            <span>10</span>
            <span>页</span>   
          </p>
      </footer>
    </div>
  </div>
</div>
</div>

   
</template>
<script>
import HeadNav from '../../components/HeaderNav.vue'
export default {
  components:{
    HeadNav
  },
  setup() {},
};
</script>
<style scoped>
.box {
  width: 100%;
  height: 100%;
  display: flex;
}
.left_nav {
  width: 190px;
  height: 865px;
  border-right: 1px solid rgb(223, 223, 223);
}
.left_nav > ul li {
  padding: 20px;
  font-size: 14px;
  vertical-align: top;
}
.left_nav > ul li:hover {
  background: rgb(240, 240, 240);
}
.right_nav {
  width: 100%;
}
.right_nav .header {
  width: 100%;
  height: 60px;
  border-bottom: 1px solid rgb(223, 223, 223);
  padding: 20px;
}
.right_nav .header p {
  color: #000;
  font-weight: 700px;
  font-size: 16px;
}
.right_nav .header p span {
  font-weight: 400px;
  color: rgb(161, 161, 161);
  padding-left: 10px;
}
.right_nav .header p i {
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 1px solid #000;
  border-color: transparent transparent #ccc #ccc;
  transform: rotate(225deg);
}

.right_nav .operation {
  height: 60px;
  padding: 0 20px;
}
.right_nav .operation .left {
  float: left;
  height: 60px;
  line-height: 60px;
}
.right_nav .operation .left span {
  padding: 5px 15px;
  border-radius: 5px;
  color: #fff;
  background: rgb(121, 187, 121);
}
.right_nav .operation .right {
  float: right;
  height: 60px;
  line-height: 60px;
}
.right_nav .operation .right input {
  width: 200px;
  height: 28px;
  border: 1px solid rgb(153, 153, 153);
  border-radius: 5px;
  padding-left: 20px;
  color: #ccc;
}
.right_nav .operation .right span {
  padding: 5px 15px;
  border-radius: 5px;
  border: 1px solid #ccc;
  color: rgb(73, 73, 73);
}
.right_nav .operation .right span:nth-child(2) {
  background: rgb(163, 163, 163);
  color: #fff;
}
.right_nav .main_box .top_header {
  width: 100%;
  font-size: 16px;
  border: 1px solid #ccc;
  height: 60px;
  display: flex;
}
.right_nav .main_box .top_header section {
  border-right: 1px solid #ccc;
  box-sizing: border-box;
  color: rgb(98, 98, 98);
}
.right_nav .main_box .top_header section:nth-child(1) {
  width: 15%;
  line-height: 60px;
  text-align: center;
}
.right_nav .main_box .top_header section:nth-child(2) {
  width: 25%;
  line-height: 60px;
  padding: 0 30px;
  padding-left: 20px;
  text-align: center;
}
.right_nav .main_box .top_header section:nth-child(3) {
  width: 20%;
  text-align: center;
  padding: 10px 30px;
  height: 60px;
}
.right_nav .main_box .top_header section:nth-child(4) {
  width: 25%;
  height: 60px;
  text-align: center;
  padding: 10px 20px;
}
.right_nav .main_box .top_header section:nth-child(5) {
  width: 15%;
  text-align: center;
  line-height: 60px;
  padding: 0 30px;
}
.right_nav .main_box {
  padding: 20px;
}
.right_nav .main_box li {
  width: 100%;
  font-size: 16px;
  border: 1px solid #ccc;
  height: 100px;
  display: flex;
}
.right_nav .main_box li section {
  border-right: 1px solid #ccc;
  box-sizing: border-box;
  color: rgb(98, 98, 98);
}
.right_nav .main_box li section:nth-child(1) {
  width: 15%;
  line-height: 60px;
  text-align: center;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}
.right_nav .main_box li section:nth-child(1) .box {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #000;
}
.right_nav .main_box li section:nth-child(1) .cen {
  width: 100px;
  text-align: left;
}
.right_nav .main_box li section:nth-child(1) .cen p {
  height: 20px;
  line-height: 20px;
  font-weight: 700;
}
.right_nav .main_box li section:nth-child(2) {
  width: 25%;
  line-height: 60px;
  padding: 0 30px;
  padding-left: 20px;
  text-align: center;
}
.right_nav .main_box li section:nth-child(3) {
  width: 20%;
  text-align: center;
  padding: 10px 30px;
  
}
.right_nav .main_box li section:nth-child(4) {
  width: 25%;
  text-align: center;
  padding: 10px 20px;
}
.right_nav .main_box li section:nth-child(4) span{
    background: rgb(243, 208, 208);
    border: 1px solid rgb(247, 159, 159);
    color: rgb(247, 159, 159);
    font-size: 12px;
    border-radius: 5px;
    padding: 5px 10px ;
    line-height: 60px;
}
.right_nav .main_box li section:nth-child(5) {
  width: 15%;
  text-align: center;
  line-height: 100px;
  padding: 0 30px;
  font-size: 12px;
  color: rgb(11, 102, 53);
}
footer {
  position: fixed;
  background: #fff;
  right: 0;
  bottom: 0;
  width: 90%;
  height: 100px;
  border-top: 1px solid rgb(192, 192, 192);
  padding-top: 20px;
}
footer span {
  padding: 5px 10px;
  border-radius: 5px;
}
footer span:nth-child(2) {
  border: 1px solid #ccc;
}
footer span:nth-child(4) {
  color: rgb(27, 68, 41);
  font-weight: 700;
}
footer span:nth-child(7) {
  border: 1px solid #ccc;
}
</style>